<script setup>
</script>

<template>
  <div style="width: 80%; margin: auto">
    <div style="margin: 40px 0">
      <h1 style="font-size: 24px">密码</h1>
      <p>请输入您当前的密码以更改您的密码。</p>
    </div>
    <ul>
      <li>
        <div>
          当前密码：
        </div>
        <div>
          <el-input></el-input>
        </div>
      </li>
      <li>
        <div>
          新密码:
        </div>
        <div>
          <el-input></el-input>
        </div>
      </li>
      <li>
        <div>
          确认新密码:
        </div>
        <div>
          <el-input></el-input>
        </div>
      </li>
    </ul>
    <div style="padding: 10px; text-align: right">
      <el-button>取消</el-button>
      <el-button type="primary">确定</el-button>
    </div>
  </div>
</template>

<style scoped>
ul li {
  list-style: none;
  display: flex;
  height: 100px;
  border-bottom: 1px solid #eeeeee;
  line-height: 100px;
}

ul li div {
  width: 400px;
}

</style>